使用图片

2024-07-12 14:06| 来源: 网络整理| 查看: 265

使用图片JS 里使用图片

通过 require 引用相对路径的图片。

比如：

export default () =>

支持别名，比如通过 @ 指向 src 目录：

export default () => JS 里使用svg

组件式引入

import { ReactComponent as Logo } from './logo.svg' function Analysis() { return }

url式引入

import logoSrc from './logo.svg' function Analysis() { return }CSS 里使用图片

通过相对路径引用。

比如，

.logo { background: url(./foo.png);}

CSS 里也支持别名，但需要在前面加 ~ 前缀，

.logo { background: url(~@/foo.png);}

注意：

这是 webpack 的规则，如果切到其他打包工具，可能会有变化less 中同样适用图片路径问题

项目中使用图片有两种方式，

先把图片传到 cdn，然后在 JS 和 CSS 中使用图片的绝对路径把图片放在项目里，然后在 JS 和 CSS 中通过相对路径的方式使用

前者不会有任何问题；后者，如果在 JS 中引用相对路径的图片时，在发布时会根据 publicPath 引入绝对路径，所以就算没有开启 dynamicImport 时，也需要注意 publicPath 的正确性。

Base64 编译

通过相对路径引入图片的时候，如果图片小于 10K，会被编译为 Base64，否则会被构建为独立的图片文件。

10K 这个阈值可以通过 inlineLimit 配置修改。

使用 CDN

TODO

【本文地址】

今日新闻